<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>005-创建自定义事件</title>
	</head>
	<body>
		<h1 id="elem">你好！来自于 script ~</h1>

		<script>
			// 【 *** 在 document 上的处理程序将被激活，并显示消息 *** 】

			// 1. 在 document 上捕获事件
			document.addEventListener('hello', function (event) {
				alert(event.detail.message)
				alert('Hello from ' + event.target.tagName)
			})

			// 2. 给 elem 分发自定义事件
			// 对于自定义事件，我们应该使用 CustomEvent 构造器。它有一个名为 detail 的附加选项，我们应该将事件特定的数据分配给它。
			const hello = new CustomEvent('hello', {
				bubbles: true, // 允许事件冒泡（所以可以在 document 上捕获到）
				cancelable: true, // 阻止默认行为，
				detail: {
					name: '创建自定义事件，要用 CustomEvent 构造函数，它和 Event 只有一个区别，就是 Event 的第二个参数中没法设置 detail。',
					message: 'Hello, world!',
				},
			})

			// 3. 触发分发给 elem 的自定义事件
			elem.dispatchEvent(hello)

			// 注意事项：
			// 1. 始终对 自定义事件 使用 addEventListener 进行调用，因为 on<event> 仅存在于内建事件中，document.onhello 不可用。
			// 2. 必须设置 bubbles: true 否则事件不会向上冒泡。
		</script>
	</body>
</html>
